<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>消息模版管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
		<link rel="stylesheet" href="../../layuiadmin/style/public.css" media="all">
	</head>
	<body>
		<div class="layui-fluid" id="LAY-component-grid-list">
			<div class="layui-card">
				<div class="layui-card-body">
					<!-- 搜索条件start -->
					<form class="layui-form meberMangement" action="">
						<div class="layui-row demo-list">
							<div class="layui-col-sm3 layui-col-md3 layui-col-lg2dot4">
								<div class="layui-form-item">
									<label class="layui-form-label">消息模版ID</label>
									<div class="layui-input-block">
										<input type="text" autocomplete="off" placeholder="精确搜索" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-col-sm3 layui-col-md3 layui-col-lg2dot4">
								<div class="layui-form-item" style="margin-bottom: 0;">
									<label class="layui-form-label" style="padding: 0;">模版应用合伙机构ID</label>
									<div class="layui-input-block">
										<input type="text" autocomplete="off" placeholder="精确搜索" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-col-sm3 layui-col-md3 layui-col-lg2dot4">
								<div class="layui-form-item">
									<label class="layui-form-label">消息触发条件ID</label>
									<div class="layui-input-block">
										<input type="text" autocomplete="off" placeholder="精确搜索" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-col-sm3 layui-col-md3 layui-col-lg2dot4">
								<div class="layui-form-item">
									<label class="layui-form-label">模版状态</label>
									<div class="layui-input-block">
										<select>
											<option value=""></option>
											<option value="">全部</option>
											<option value="0">1</option>
											<option value="1">2</option>
										</select>
									</div>
								</div>
							</div>
							<div class="layui-col-sm3 layui-col-md3 layui-col-lg2dot4">
								<div class="layui-form-item">
									<label class="layui-form-label">广告类型</label>
									<div class="layui-input-block">
										<select>
											<option value=""></option>
											<option value="">全部</option>
											<option value="0">1</option>
											<option value="1">2</option>
										</select>
									</div>
								</div>
							</div>
							<div class="layui-col-sm3 layui-col-md3 layui-col-lg2dot4">
								<div class="layui-form-item">
									<label class="layui-form-label">消息模版名称</label>
									<div class="layui-input-block">
										<input type="text" autocomplete="off" placeholder="模糊搜索" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-col-sm3 layui-col-md3 layui-col-lg2dot4">
								<div class="layui-form-item" style="margin-bottom: 0;">
									<label class="layui-form-label" style="padding: 0;">模版应用合伙机构名称</label>
									<div class="layui-input-block">
										<input type="text" autocomplete="off" placeholder="模糊搜索" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-col-sm3 layui-col-md3 layui-col-lg2dot4">
								<div class="layui-form-item">
									<label class="layui-form-label">模版应用</label>
									<div class="layui-input-block">
										<select>
											<option value=""></option>
											<option value="">全部</option>
											<option value="0">1</option>
											<option value="1">2</option>
										</select>
									</div>
								</div>
							</div>
							<div class="layui-col-sm3 layui-col-md3 layui-col-lg2dot4">
								<div class="layui-form-item">
									<label class="layui-form-label">消息触发条件名称</label>
									<div class="layui-input-block">
										<input type="text" autocomplete="off" placeholder="模糊搜索" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-col-sm3 layui-col-md3 layui-col-lg2dot4">
								<div class="layui-form-item">
									<label class="layui-form-label">审核状态</label>
									<div class="layui-input-block">
										<select>
											<option value=""></option>
											<option value="">全部</option>
											<option value="0">1</option>
											<option value="1">2</option>
										</select>
									</div>
								</div>
							</div>
							<div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
								<div class="layui-col-sm12 layui-col-md12 layui-col-lg6">
									<div class="layui-btn-container">
										<button type="button" class="layui-btn" id="addRule-btn">新建消息模板</button>
									</div>
								</div>
								<div class="layui-col-sm12 layui-col-md12 layui-col-lg6">
									<div class="layui-btn-container" style="justify-content: flex-end;display: flex;">
										<button type="button" class="layui-btn">清空搜索</button>
										<button type="button" class="layui-btn">导出</button>
										<button type="button" class="layui-btn" style="margin-right: 0;">搜索</button>
									</div>
								</div>
							</div>
						</div>
					</form>
					<!-- 搜索条件end -->
					<!-- tab标签start -->
					<div class="layui-tab custom-tab">
						<div class="layui-tab-content" style="padding: 0;">
							<div class="layui-tab-item layui-show">
								<!-- 消息模版管理start -->
								<div class="layui-table-meber2">
									<table id="allMember" lay-filter="allMember" class="layui-table"></table>
								</div>
								<!-- 消息模版管理end -->

								<!-- 操作start -->
								<script type="text/html" id="memberMsgOperate">
									<div>
									  <a class="layui-btn-xs small-btn" lay-event="effect">启用</a> |
									  <a class="layui-btn-xs small-btn" lay-event="stopUse">禁用</a> |
									  <a class="layui-btn-xs small-btn" lay-event="editRule">编辑</a> |
									  <a class="layui-btn-xs small-btn" lay-event="audit">审核</a>
								  </div>
								</script>
								<!-- 操作end -->
							</div>
						</div>
					</div>
					<!-- tab标签end -->
				</div>
			</div>
		</div>

		<!-- 新建和编辑消息模板start -->
		<div class="editRule-box" id="editRule-box">
			<div class="layui-card">
				<div class="layui-card-body">
					<form class="layui-form" action="">
						<div class="layui-row demo-list">
							<div class="layui-form-item" style="font-weight:bold;">
								<label class="layui-form-label" style="font-weight:bold;">消息模板ID</label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" value="MT10000010000" readonly="true" style="border: none;">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">消息模板名称</label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" placeholder="请输入消息模板名称">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">模板内容</label>
								<div class="layui-input-block">
									<textarea id="demo" style="display: none;"></textarea>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-form-label">应用合伙机构</div>
								<div class="layui-input-block">
									<div id="shop-box">
										<input type="text" class="layui-input" placeholder="请选择" readonly id="shop">
										<div style="display: none;" id="shop-container">
											<div>
												<div class="layui-btn-container">
													<a class="layui-btn layui-btn-sm">全选</a>
													<a class="layui-btn layui-btn-sm">清空</a>
													<a class="layui-btn layui-btn-sm">反选</a>
												</div>

												<div>
													<div><input type="checkbox" name="shop" lay-skin="primary" title="莲藕互联网医院"></div>
													<div><input type="checkbox" name="shop" lay-skin="primary" title="阿康连锁"></div>
													<div><input type="checkbox" name="shop" lay-skin="primary" title="广州天河石牌村村医"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="layui-form-item layui-form-text">
								<label class="layui-form-label">已选合伙机构</label>
								<div class="layui-input-block">
									<div style="padding: 6px 10px;min-height: 100px; border:1px solid #e6e6e6;background-color: #fff;
    border-radius: 2px;">
										<span style="margin-right: 10px;">
											莲藕互联网医院 <i class="layui-icon layui-icon-close"></i>
										</span>

										<span style="margin-right: 10px;">
											莲藕互联网医院 <i class="layui-icon layui-icon-close"></i>
										</span>
									</div>
								</div>
							</div>
							<div class="layui-form-item layui-form-text">
								<label class="layui-form-label">选择应用</label>
								<div class="layui-input-block">
									<div class="layui-input-inline">
										<input type="checkbox" name="shop" lay-skin="primary" title="用户端">
										<input type="checkbox" name="shop" lay-skin="primary" title="推广端">
									</div>
									<div class="layui-form-mid layui-word-aux">(备注可多选）</div>
								</div>
							</div>
							<div class="layui-form-item layui-form-text">
								<label class="layui-form-label">消息触发条件</label>
								<div class="layui-input-block">
									<select>
										<option value=""></option>
										<option value="">全部</option>
										<option value="0">1</option>
										<option value="1">2</option>
									</select>
								</div>
							</div>
							<div class="layui-form-item layui-form-text">
								<label class="layui-form-label">备注</label>
								<div class="layui-input-block">
									<textarea placeholder="请输入备注" class="layui-textarea"></textarea>
								</div>
							</div>
							<div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
								<div class="layui-btn-container" style="text-align: center;margin-top: 10px;">
									<button class="layui-btn">保存</button>
									<div class="layui-btn layui-btn-primary closeIndex-btn">取消</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!-- 新建和编辑消息模板end -->
		<script src="../../layuiadmin/layui/layui.js"></script>
		<script>
			layui.config({
				base: '../../layuiadmin/' //静态资源所在路径
			}).extend({
				index: 'lib/index' //主入口模块
			}).use(['index', 'form', 'element', 'table', 'laydate', 'layarea', 'layedit'], function() {
				var $ = layui.$,
					admin = layui.admin,
					element = layui.element,
					form = layui.form,
					table = layui.table,
					laydate = layui.laydate,
					layarea = layui.layarea,
					layedit = layui.layedit;

				layedit.build('demo'); //建立编辑器

				$("#shop").on('click', function() {
					$("#shop-container").toggle();
				});

				//表格实例
				table.render({
					elem: '#allMember',
					url: layui.setter.base + 'json/table/user.js' //数据接口
						,
					page: true //开启分页
						,
					limit: 5,
					cols: [
						[ //表头
							{
								type: 'numbers',
								align: 'center',
								title: '序号',
							}, {
								title: '操作',
								width: 180,
								align: 'center',
								toolbar: '#memberMsgOperate'
							}, {
								field: 'id',
								title: '消息模版ID',
								width: 120
							}, {
								field: '消息模版名称',
								title: '商品名',
								width: 160
							}, {
								field: 'sex',
								title: '模版应用合伙机构名称列表',
								width: 200
							}, {
								field: 'city',
								title: '模版应用列表',
								width: 160
							}, {
								field: 'sign',
								title: '消息触发条件',
								width: 160
							}, {
								field: 'experience',
								title: '模板内容',
								width: 160
							}, {
								field: 'logins',
								title: '审核状态',
								width: 160
							}, {
								field: 'wealth',
								title: '生效状态',
								width: 300,
							}, {
								field: 'classify',
								title: '模版备注',
								width: 160,
							}, {
								field: 'score',
								title: '创建人',
								width: 160,
							}, {
								field: 'sign',
								title: '创建时间',
								width: 200
							}, {
								field: 'sign',
								title: '修改人',
								width: 200
							}, {
								field: 'sign',
								title: '修改时间',
								width: 200
							}, {
								field: 'sign',
								title: '审核人',
								width: 200
							}, {
								field: 'sign',
								title: '审核时间',
								width: 200
							}, {
								field: 'sign',
								title: '最后启用时间',
								width: 200
							}
						]
					]
				});

				//监听工具条
				table.on('tool(allMember)', function(obj) {
					var data = obj.data;
					console.log(data);
					switch (obj.event) {
						case 'effect':
							// 启用
							layer.confirm('是否启用该模板？', {
								title: '温馨提示',
								icon: 3,
								btn: ['确定', '取消'] //按钮
							}, function(index) {
								// 确定
								layer.close(index);
							}, function() {
								// 取消
							});
							break;
						case 'stopUse':
							// 禁用
							layer.confirm('是否禁用该模板？', {
								title: '温馨提示',
								icon: 3,
								btn: ['确定', '取消'] //按钮
							}, function(index) {
								// 确定
								layer.close(index);
							}, function() {
								// 取消
							});
							break;
						case 'audit':
							// 审核
							layer.confirm('审核是否通过？', {
								title: '温馨提示',
								icon: 3,
								btn: ['审核通过', '审核不通过'] //按钮
							}, function(index) {
								// 确定
								layer.close(index);
							}, function() {
								// 取消
							});
							break;
						case 'editRule':
							// 编辑消息模板
							layer.open({
								type: 1,
								title: '编辑消息模板',
								area: '1000px',
								shade: 0.8,
								id: 'LAY_editRule' //设定一个id，防止重复弹出
									,
								btnAlign: 'c',
								moveType: 1 //拖拽模式，0或者1
									,
								content: $("#editRule-box"),
								success: function(layero) {

								}
							});
							break;
					}
					// if(obj.event === 'detail'){
					//   layer.msg('ID：'+ data.id + ' 的查看操作');
					// } else if(obj.event === 'del'){
					//   layer.confirm('真的删除行么', function(index){
					//     obj.del();
					//     layer.close(index);
					//   });
					// } else if(obj.event === 'edit'){
					//   layer.alert('编辑行：<br>'+ JSON.stringify(data))
					// }
				});

				// 新建消息模板
				$("#addRule-btn").on('click', function() {
					layer.open({
						type: 1,
						title: '新建消息模板',
						area: '1000px',
						shade: 0.8,
						id: 'LAY_editRule' //设定一个id，防止重复弹出
							,
						btnAlign: 'c',
						moveType: 1 //拖拽模式，0或者1
							,
						content: $("#editRule-box"),
						success: function(layero) {

						}
					});
				});

			

				// 取消按钮关闭所有弹出层
				$(".cancel-btn").on('click', function() {
					layer.closeAll();
				});

				// 取消按钮关闭弹窗
				$(".closeIndex-btn").on('click', function() {
					layer.close(layer.index);
				});
			});
		</script>
	</body>
</html>
